<template>
  <div>
    <el-dialog :visible.sync="visible"
               :title="device.name"
               width="50%"
               :device='device.id'
               :before-close="modalClose"
               center
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :inline='true'
               :model="ruleForm"
               ref="ruleForm"
               label-width="70px">
        <el-form-item label="序列号："
                      prop="serialNumber">
          <el-input v-model="ruleForm.serialNumber"
                    placeholder="请输入序列号"
                    clearable
                    @clear="getList"></el-input>
        </el-form-item>
        <el-button @click="getList">查询</el-button>
        <el-button type="primary"
                   @click="handleRowClick('', 'add')">新增</el-button>
      </el-form>
      <element-table :columns="columns"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="ruleForm.pageIndex"
                     :height="441"
                     @handleChangePage="handleChangePage">
        <template v-slot:edit="{row}">
          <el-button type="primary"
                     size="mini"
                     @click="handleRowClick(row, 'edit')">编 辑</el-button>
          <el-button type="danger"
                     size="mini"
                     @click="handleRowDelClick(row)">删 除</el-button>
        </template>
        <template v-slot:property="{row}">
          <el-tag v-if="row.property === 1">公司投放</el-tag>
          <el-tag v-if="row.property === 2">客户购买</el-tag>
          <el-tag v-if="row.property === 3">客户自有</el-tag>
        </template>
      </element-table>
    </el-dialog>
    <el-dialog :title="title"
               :visible.sync="dialogVisible"
               width="22%"
               :before-close="handleClose">
      <el-form :model="addForm"
               ref="addFormRef"
               :rules="addRules"
               label-width="120px">
        <el-form-item label="设备序列号"
                      prop="serialNumber">
          <el-input v-model="addForm.serialNumber"
                    placeholder="请输入设备序列号"
                    style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="设备属性"
                      prop="property">
          <el-select v-model="addForm.property"
                     placeholder="请选择设备属性">
            <el-option :label="item.label"
                       v-for="item in propertyList"
                       :key="item.value"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitDevice(deviceId)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable.vue'
  export default {
    name: 'deviceManger',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      device: {
        type: Object,
        default: false
      }
    },
    data () {
      const goodsTypeId = this.device.id
      return {
        goodsTypeId: goodsTypeId,
        loading: false,
        ruleForm: {
          serialNumber: '', // 设备序列号
          pageIndex: 1,
          pageSize: 10
        },
        pageTotal: 0,
        tableData: [],
        columns: [
          {
            label: '设备序列号',
            prop: 'serialNumber', // 设备序列号
            width: 200
          },
          {
            label: '设备属性',
            prop: 'property', // 设备属性
            isSlot: true,
            width: 100
          }, {
            label: '归属网点名称',
            prop: 'networkName' // 归属网点名称
          }, {
            width: 160,
            label: '操作',
            prop: 'edit',
            isSlot: true
          }
        ],
        propertyList: [ // 设备属性
          { value: 1, label: '公司投放' },
          { value: 2, label: '客户购买' },
          { value: 3, label: '客户自有' }
        ],
        dialogVisible: false,
        addForm: {
          serialNumber: '',
          property: ''
        },
        addRules: {
          serialNumber: [
            { required: true, message: '设备序列号不能为空', trigger: 'blur' }
          ],
          property: [
            { required: true, message: '请选择设备属性', trigger: 'change' }
          ]
        },
        deviceId: '',
        title: ''
      }
    },
    methods: {
      // 关闭弹出框
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性 
      },
      handleChangePage (page) {
        this.ruleForm.pageIndex = page;
        this.getList();
      },
      // 设备管理列表
      async getList () {
        this.loading = true
        let { pageIndex, ...params } = this.ruleForm
        const { data: res } = await this.post(this.api.apparatus.getGoodsTypeUseManagePage, {
          goodsTypeId: this.goodsTypeId,
          pageIndex: pageIndex - 1,
          ...params,
        })
        if (res.code === '200') {
          this.tableData = res.object
          this.pageTotal = res.totalNum
          this.loading = false
        } else {
          this.$message.success(res.message)
        }
      },
      // 新增设备
      submitDevice (deviceId) {
        this.$refs['addFormRef'].validate(async valid => {
          if (!valid) return false;
          const { data: res } = await this.post(this.api.apparatus.updataGoodsTypeUseManage, {
            id: deviceId,
            goodsTypeId: this.goodsTypeId,
            ...this.addForm,
          })
          if (res.code !== '200') return this.$message.error(res.message)
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getList()
        })
      },
      handleClose () {
        this.dialogVisible = false
      },
      // 设备操作
      async handleRowClick (row, op) {
        this.deviceId = row.id
        switch (op) {
          case 'edit':
            this.title = '编辑设备'
            const { data: res } = await this.post(this.api.apparatus.getGoodsTypeUseManageDetail, {
              id: this.deviceId,
              goodsTypeId: this.goodsTypeId,
              serialNumber: row.serialNumber,
              property: row.property
            })
            if (res.code !== '200') return this.$message.error(res.message)
            this.dialogVisible = true
            let resObj = res.object
            this.addForm.serialNumber = resObj.serialNumber
            this.addForm.property = resObj.property
            break
          case 'add':
            if (this.$refs['addFormRef']) {
              this.$refs['addFormRef'].resetFields();
            }
            this.dialogVisible = true
            this.title = '新增设备'
            break
        }
      },
      // 删除
      handleRowDelClick (row) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.apparatus.delGoodsTypeUseManage, { id: row.id }).then(result => {
              if (result.data.code === '200') {
                this.$message.success('删除成功')
                this.getList()
              }
            })
          })
      }
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style lang="scss" scoped>
  .el-tooltip {
    span {
      padding-right: 10px;
    }
  }
</style>